.home-page {
  font-size: 12px;
}
.page-container{
  margin: 20px;

}
.home-time {
  display: flex;
  justify-content: space-between;
  background-color: rgb(64, 64, 64);
  min-width: 300px;
  width: 300px;
  color: #fff;
}

.calender {
  flex-wrap: nowrap;
  overflow-x: auto;
  background-color: #fff;
  width: calc(100vw - 340px);
}
.calender::-webkit-scrollbar {
  width: 4px; /* 对于垂直滚动条宽度 */
  height: 4px; /* 对于横向滚动条高度 */
  cursor: pointer;
}

/* 滚动条轨道内阴影 */
.calender::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

/* 滚动条滑块 */
.calender::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

/* 鼠标悬停时的滚动条滑块颜色 */
.calender::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  cursor: pointer;
}
.top-container {
  position: fixed;
  top: 60px;
  z-index: 10;
  display: flex;
 justify-content: space-between;
 overflow: hidden;
 z-index: 999;
  background-color: black;
}

.calender-container {
  display: flex;
  flex-direction: row;
  text-align: center;

}

.flex-row {
  display: flex;
  flex-direction: row;
}

.calender-one {
  z-index: 999 !important;
  border-left: 0.1px solid #8f8f8f;
  border-right: 0.1px solid #8f8f8f;
}

.month {
  font-weight: 500;

  color: #fff;
  background-color: #585858;
}

.week {
  text-align: center;
  font-weight: 500;
  width: 130px;
  background-color: #d0cecf;

}
.bar-one{
  display: flex;
  align-items: center;
  height: 20px;
  text-align: right;
  justify-content: flex-end;
  width: 150px;
}
.week-start {
  text-align: center;
  width: 130px;

}

.week-end {
  text-align: center;
  width: 130px;
}

.content-continer {
  margin-top: 120px;
  width: auto;
  overflow-x: auto;

}

.dept-line {
  color: #fff;
  font-weight: 500;
  margin-top: 5px;
  padding: 4px 0;
}

.content-one {
  margin: 5px 0;
}

.conent-left {
  display: flex;
  justify-content: space-between;
  width: 300px;
  color: #fff;
  margin: 5px 0;
}

.conent-right {
  display: flex;
  flex-direction: row;
  position: relative;
  width: calc(100vw - 300px);
  color: #fff;
  margin: 5px 0;
  overflow-x: scroll;

}
.conent-right::-webkit-scrollbar {
  display: none;
}

.left-container {
  width: 150px;
  border-left: 0.1px solid #8f8f8f;
}
.month-top{

  width: 150px;
  text-align: right;
  color: #fff;
  border-left: 0.1px solid #8f8f8f; 
}

.right-container {
  color: #000;
  font-weight: 500;
  width: 150px;
  border-left: 0.1px solid #8f8f8f;
  height: auto;
  display: flex;
  flex-direction: column;


}

.content-title{
  position: absolute;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 14px;
  border: 1px solid #000;
  cursor: pointer;

}
 

.department-list {
  width: 200px; 
  border-right: 1px solid #ccc;
}

.department-item {
  text-align: right;
  padding-right: 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}


.panel {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #ffffff;
  border-top: 1px solid #BABABA;

}

.info-section {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.icon-circle,
.icon-clock,
.icon-department,
.icon-event {
  margin-right: 10px;
  color: #777;
}

.label {
  font-weight: bold;
  margin-right: 10px;
}

.value {
  flex: 1;
}

.details-section {
  border-radius: 8px;
background-color: #f6f6f6;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.details-list {

  /* list-style-type: none; */
  /* padding: 0; */
}

.details-list li {
  margin-bottom: 5px;
}
.detail-li{
  font-weight: 700;
}
.activity-header-2{
  position: absolute;
  top: 0;
  height: 20px;
  width: 100%;

  text-align: center;
  display: flex;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.top-bar{
  display: flex;
  justify-content: center;
  background-color: #000;
  position: fixed;
  top: 40px;
  height: 20px;
  width: calc(100vw - 40px);
  overflow: hidden;
  z-index: 20;
  color: #fff;
}
.calendar-current{
  display: flex;
  align-items: center;
  position: fixed;
  gap: 5px;
  top: 0px;
  height: 40px;
  background-color: #fff;
  z-index: 99;
  width: 100%;
  font-weight: 900;
}